<!--
 * @Author: ydli
 * @LastEditTime: 2021-05-02 18:09:35
 * @Description: 
-->
<template>
  <div class="home-page">
    <div class="row py-lg-5">
      <div class="col-lg-6 col-md-8 mx-auto">
        <img src="../assets/logo.png" alt="callout" class="w-50" />
        <h2>随心写作，自由表达</h2>
        <p class="mt-4">
          <router-link to="/create" class="btn btn-primary"
            >开始写文章</router-link
          >
        </p>
      </div>
    </div>
  </div>
  <h4 class="font-weight-bold text-center">发现精彩</h4>
  <column-list :list="list"></column-list>
</template>
<script lang="ts">
import { defineComponent, computed, onMounted } from "vue";
import { useStore } from "vuex";
import { GlobalDataProps} from "../store";
import ColumnList from "../components/CoumnList.vue";
export default defineComponent({
  components: {
    ColumnList
  },
  setup() {
    const store = useStore<GlobalDataProps>();
    const list = computed(() => store.state.columns);
    onMounted(() => {
      store.dispatch("fetchColumns");
    });
    return {
      list
    };
  },
});
</script>
